<!--
 * @Author: 张辰龙 zhangchenlong@julimeng.com
 * @Date: 2024-07-31 18:08:12
 * @LastEditors: 张辰龙 zhangchenlong@julimeng.com
 * @LastEditTime: 2025-06-19 10:11:13
 * @FilePath: /flutter-h5/pageUser/user/feedBack.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!--意见反馈页面-->
<template>
	<view>
		<view v-if="!isSuccess">
			<view style="padding: 0 30rpx;">
				<view style="display: flex;align-items: center; border-bottom:1rpx solid #F5F5F5; padding-bottom: 30rpx;">
					<view class="pic">
						<block v-for="(item, idx) in feedList.pic" :key="idx">
							<view class="img-box" v-if="feedList.pic.length > 0">
								<image class="image-pre" :src="item" mode=""></image>
								<view class="auto-mask"> </view>
								<image @click="deleteImage" class="delete-icon" :src="require('../static/delete.png')"
									mode=""></image>
							</view>
						</block>
						<view class="upolad-image" v-if="feedList.pic.length < 4" @click="uploadpic">
							<view class="upload-item">
								<image src="/static/image/add.png" mode=""></image>
								<view>非必填</view>
							</view>
						</view>
					</view>
				</view>
				<view style="margin-top: 40rpx;">
					<uni-easyinput :inputBorder="false" type="textarea" v-model="feedList.question" maxlength="200"
						placeholderStyle="font-size: 24rpx" placeholder="请详细描述您的问题或建议，我们将及时跟进解决（必填）"></uni-easyinput>
					<view class="limit-num">{{ feedList.question.length }}/200</view>
				</view>
			</view>
			<view style="width:100%;margin: 0 auto;bottom: 300rpx;left: 0">
				<button :disabled="!feedList.question" class="btnStyle" @click="feedBackSubmit">提交</button>
			</view>
		</view>
		<view v-else style="margin-top: 100rpx;">
			<empty :emptyTitle="'您的意见已反馈成功'" img-src="../"></empty>
			<view class="btn-againStyle" @click="feedbackAgain">再来一条</view>
		</view>
	</view>
</template>

<script>
import {
	feedbackApi
} from "@/api/user";
import { openFeedbackSubscribe } from "@/utils/SubscribeMessage";
import { APP_ID } from "@/config/app";
export default {
	data() {
		return {
			fileList1: [],
			feedList: {
				question: '',
				phoneNumber: '',
				pic: []
			},
			isSuccess: false,
			debounceTimer: null

		}
	},
	methods: {
		feedbackAgain() {
			this.isSuccess = false
		},
		getSystemInfo() {
			const deviceInfo = wx.getDeviceInfo()
			return {
				deviceBrand: deviceInfo.brand,
				deviceModel: deviceInfo.model,
				deviceSystem: deviceInfo.system,
				devicePlatform: deviceInfo.platform,
			}

		},
		getVersionInfo() {
			const version = wx.getAccountInfoSync()
			console.log(version);
			return version.miniProgram.version
		},

		submitForm() {
			let params = {
				content: this.feedList.question,
				pics: this.feedList.pic.join(','),
				// #ifdef MP-WEIXIN
				...this.getSystemInfo(),
				appid: APP_ID,
				appVersion: this.getVersionInfo(),
				// #endif
			}

			feedbackApi(params).then(res => {
				if (res.code === 200) {
					this.$util.Tips({ title: `提交成功` }, () => {
						this.isSuccess = true
						this.feedList.question = ''
						this.feedList.pic = []
					})

				}
			})
		},

		// 意见反馈提交
		feedBackSubmit() {
			if (this.feedList.question.length === 0) {
				this.$util.Tips(`请输入问题描述或建议`)
				return
			} else {
				this.submit()
			}
		},

		submit() {
			openFeedbackSubscribe().then(res => {
				this.submitForm()
			})
		},

		priview(idx) {
			uni.previewImage({
				current: idx,
				urls: this.feedList.pic,
			})
		},
		uploadpic() {
			this.$util.uploadImageOne({
				type: 3,
				name: 'multipart'
			}, res => {
				uni.hideLoading();
				let data = JSON.parse(res.data)
				this.feedList.pic.push(data.data.url)
				if (this.feedList.pic.length > 6) {
					this.$util.Tips(`最多只能上传6张图片`)
					this.feedList.pic.pop()
				}
			})
		},
		deleteImage(idx) {
			this.feedList.pic.splice(idx, 1)
		}
	}
}
</script>

<style lang="scss">
page {
	background-color: #fff !important;
}

/deep/ .is-input-border {
	border: none;
}

/deep/ .uni-easyinput__content-textarea {
	height: 500rpx;
}

.limit-num {
	text-align: right;
	font-weight: 600;
	font-size: 32rpx;
	color: #999999;
}

.upolad-image {
	width: 180rpx;
	height: 180rpx;
	background-color: #f5f5f5;
	position: relative;
	border-radius: 20rpx;

	.upload-item {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);

		>image {
			display: inline-block;

			width: 72rpx;
			height: 72rpx;

		}

		>view {
			color: #999;
		}
	}

}

.pic {
	// margin-right: 30rpx;
	display: flex;
	flex-wrap: wrap;

	.img-box {
		width: 180rpx;
		height: 180rpx;
		position: relative;
		margin-right: 30rpx;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		overflow: hidden;

		.image-pre {
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.3);
		}

		.auto-mask {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.3);
			/* 半透明黑色遮罩 */
			z-index: 1;
			/* 覆盖在图片上方 */
		}

		.delete-icon {
			width: 30rpx;
			height: 30rpx;
			z-index: 2;
			position: absolute;
			font-size: 36rpx;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
		}
	}
}

.btnStyle {
	width: 90% !important;
	margin: 200rpx auto;
	// border-radius: 60rpx !important;
	background: #2872FD;
	color: #ffffff;
	font-size: 28rpx;

	:after {
		border: none;
	}
}

.btn-againStyle {
	width: 330rpx;
	height: 88rpx;
	line-height: 88rpx;
	background: #276FF7;
	border-radius: 12rpx;
	font-weight: 600;
	font-size: 34rpx;
	color: #FFFFFF;
	text-align: center;
	margin: 0 auto;
}
</style>